virtual Improvements (Dynamic Item Sizes, Fix Broken Reactivity)#803
virtual Improvements (Dynamic Item Sizes, Fix Broken Reactivity)#803jaydevelopsstuff wants to merge 5 commits intosolidjs-community:mainfrom
virtual Improvements (Dynamic Item Sizes, Fix Broken Reactivity)#803Conversation
|
|
I tried to provide a way to access type VirtualListProps<T extends readonly any[], U extends JSX.Element> = {
// ...
setScrollToItem: (scrollToItem: (itemIndex: number) => void) => void;
};
// Inside `VirtualList`
let scrollContainer!: HTMLDivElement; // Attached Ref
props.setScrollToItem((itemIndex: number) => scrollToItem(itemIndex, scrollContainer));In Use: let scrollToItem!: (itemIndex: number) => void;
// ...
<VirtualList
// ...
setScrollToItem={fn => (scrollToItem = fn)}
// ...
>
{/* ... */}
</VirtualList>Broken Reactivity *Now Fixed by this PR*Also, reactivity seems to be broken for the |
|
Alright, I fixed the issue with reactivity being broken by not unwrapping accessors at the top level of Would still like some help with exposing |
jaydevelopsstuff
changed the title
virtual Improvements (Dynamic Item Sizes)virtual Improvements (Dynamic Item Sizes, Fix Broken Reactivity)
callback indexes more useful
| rootHeight: MaybeAccessor<number>; | ||
| rowHeight: MaybeAccessor<number>; | ||
| overscanCount?: MaybeAccessor<number>; | ||
| rowHeight: MaybeAccessor<number | ((row: T[number], index: number) => number)>; |
There was a problem hiding this comment.
An accessor that returns a function is a bit stupid. Shouldn't it be MaybeAccessor<number> | ((row: T[number], index: number) => number)?
| }); | ||
| }); | ||
|
|
||
| // Binary Search for performance |
There was a problem hiding this comment.
The whole function is already pretty complex without the binary search being included inside. I would like to ask you to extract from the function and use offsets as another parameter.
2 participants
This adds support for dynamic item sizes in the
virtualpackage.This is accomplished by adding
| (row: T[number], index: number) => number)to therowHeightparameter, and type-checking for either case withincreateVirtualList.I also added
scrollToItemtoVirtualListReturnas a utility function for scrolling to a specified item index.I'm implementing this because I need it for use in another project, so if I end up needing more features I'll implement them (but I'm also happy to work on other stuff if it's requested). This is an early stage PR and my first crack back at SolidJS in almost half a year after working on other projects, so I'm very rusty and probably didn't implement all of this idiomatically—please correct me if necessary.
(Also contains a small patch to add
typeto an import insite/src/primitives/DocumentHydrationHelper.tsx, since the dev server would not run without that change)